<template>
	<view>
		<!-- 商品图片及标题 开始 -->
				<view class="popup-goodsview">
					<view class="popup-bimg">
						<image :src="curgoods.icon"></image>
					</view>
					<view>
						<view class="popup-goodsname">
							{{ curgoods.gname }}
						</view>
						<view class="popup-goodscontent">
							{{ curgoods.content }}
						</view>
					</view>
				</view>
				<!-- 商品图片及标题 结束-->
				
				<scroll-view scroll-y="true" style="max-height: 50vh;">
					<!-- 杯型 开始 -->
					<view class="c-select" v-if="curgoods.bsize!=undefined && curgoods.bsize.length>0">
						<view class="c-select-titel">杯型</view>
						<view class="c-select-type">
							<view class="c-select-type-item" @click="onbsizeActive(index)"
								:class="bsizeActive==index?'active':''" v-for="(item,index) in curgoods.bsize" :key="index">
								{{item.bxing}}
							</view>
						</view>
					</view>
					<!-- 杯型 结束 -->
					<!-- 加料 开始 -->
					<view class="c-select" v-if="curgoods.jialiao!=undefined && curgoods.jialiao.length>0">
						<view class="c-select-titel">加料（多选，可重复）</view>
						<view class="c-select-type">
							<view class="c-select-jiaolao-item" :class="item.lnum>0?'active':''"
								v-for="(item,index) in curgoods.jialiao" :key="index">
								<uni-icons type="minus" size="25" :color="item.lnum>0?'#E60012':'#DDDDDD'"
									@click="onjiaolaoSub(item)"></uni-icons>
								{{item.lname}}￥{{item.lprice}}
								<uni-icons type="plus-filled" size="25" color="red" @click="onjiaolaoActive(item)">
								</uni-icons>
								<view class="badge" v-show="item.lnum>0">
									{{item.lnum}}
								</view>
							</view>
						</view>
					</view>
					<!-- 加料 结束 -->
					<!-- 底料 开始 -->
					<view class="c-select" v-if="curgoods.diliao!=undefined && curgoods.diliao.length>0">
						<view class="c-select-titel">底料</view>
						<view class="c-select-type">
							<view class="c-select-type-item" @click="ondiliaoActive(index)"
								:class="diliaoActive==index?'active':''" v-for="(item,index) in curgoods.diliao" :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="c-select" v-if="curgoods.diliao2!=undefined &&curgoods.diliao2.length>0">
						<view class="c-select-titel">底料2</view>
						<view class="c-select-type">
							<view class="c-select-type-item" @click="ondiliaoActive2(index)"
								:class="diliaoActive2==index?'active':''" v-for="(item,index) in curgoods.diliao2" :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<!-- 底料 结束 -->
					<!-- 温度 开始 -->
					<view class="c-select" v-if="curgoods.wendu!=undefined && curgoods.wendu.length>0">
						<view class="c-select-titel">温度</view>
						<view class="c-select-type">
							<view class="c-select-type-item" @click="onwenduActive(index)"
								:class="wenduActive==index?'active':''" v-for="(item,index) in curgoods.wendu" :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<!-- 温度 结束 -->
					<!-- 糖度 开始 -->
					<view class="c-select" v-if="curgoods.tangdu!=undefined && curgoods.tangdu.length>0">
						<view class="c-select-titel">糖度</view>
						<view class="c-select-type">
							<view class="c-select-type-item" @click="ontangduActive(index)"
								:class="tangduActive==index?'active':''" v-for="(item,index) in curgoods.tangdu" :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view style="height: 30px;"></view>
					<!-- 糖度 结束 -->
				</scroll-view>
				<!-- 加入购物车开始 -->
				<view class="cart">
					<view>
						<text class="danwei">￥</text><text class="price">{{buyPrice}}</text>
					</view>
					<view v-if="buyNums>0" class="buynums">
						<uni-icons type="minus" size="30" color="#E60012" @click="subbuynum"></uni-icons>
						<text>{{buyNums}}</text>
						<uni-icons type="plus-filled" size="30" color="#E60012" @click="addbuynum"></uni-icons>
					</view>
					<view v-else class="add-cart" @click="addcart">
						加入购物车
					</view>
				</view>
				<!-- 加入购物车结束-->
	</view>
</template>

<script>
	export default {
		name:"goodspopup",
		props:{
					"cgoods":{
						type:Object,
						default:{}
					},
					"ccartlist": {
						type: Object,
						default: {}
					}
				},
				data() {
					return {
						bsizeActive: 0,
						diliaoActive: 0,
						diliaoActive2: 0,
						wenduActive: 0,
						tangduActive: 0,
						buyPrice:this.cgoods.price,
						buyNums: 0,
						curgoods: this.cgoods, //当前将要购买的商品
						buygoods: {},
						cartlist: this.ccartlist,
						shop: this.shop
					}
				},
				mounted() {
					// 加料重置
					this.reset()
				},
				methods: {
					setCgoods(val) {
						this.curgoods = val
						// 加料重置
						this.reset()
					},
					reset() {
						// 加料重置
						if (this.curgoods.jialiao != undefined)
							this.curgoods.jialiao.forEach(item => {
								item.lnum = 0
							})
					},
					//重置购买状态
					resetBuyStatus() {
						this.buygoods = {}
						this.buyNums = 0
					},
					subbuynum() {
						//把购物车的商品数量减一，如果item.buyNums=0，在购物车内把商品移除
						this.cartlist.goods.forEach((item, index) => {
							//先判断是否有相同的gid
							if (item.gid == this.buygoods.gid) {
								//再对比bcontent
								if (this.buygoods.bcontent == item.bcontent) {
									//找到此商品，如果item.buyNums=0，在购物车内把商品移除
									//购买数量
									item.buyNums = --this.buyNums
									if (item.buyNums <= 0) {
										this.cartlist.goods.splice(index, 1)
									}
								}
							}
						})
						// 重新计算购物车内的商品价格
						this.emitComputerPrice()
					},
					addbuynum() {
						//在购物车内查找此商品，找到再次添加商品到购物车
						this.cartlist.goods.forEach(item => {
							//先判断是否有相同的gid
							if (item.gid == this.buygoods.gid) {
								//再对比bcontent
								if (this.buygoods.bcontent == item.bcontent) {
									//购买数量加1
									item.buyNums=++this.buyNums
								}
							}
						})
						// 重新计算购物车内的商品价格
						this.emitComputerPrice()
					},
					addcart() {
						//设置商品对象
						this.addbuygoods()
						// 添加购物车
						this.addcartlist()
						// 重新计算购物车内的商品价格
						this.emitComputerPrice()
					},
					addbuygoods() {
						this.buygoods.gid = this.curgoods.gid
						this.buygoods.gname = this.curgoods.gname
						this.buygoods.icon = this.curgoods.icon
						//杯型
						this.buygoods.bcontent = this.curgoods.bsize.length > 0 ? this.curgoods.bsize[this.bsizeActive].bxing +
							"/" : ''
						// 加料
						this.curgoods.jialiao.forEach(item => {
							if (item.lnum == 1) {
								this.buygoods.bcontent += item.lname + "/"
							}
							if (item.lnum == 2) {
								this.buygoods.bcontent += item.lname + "*2" + "/"
							}
						})
						//底料
						this.buygoods.bcontent += this.curgoods.diliao.length > 0 ? this.curgoods.diliao[this.diliaoActive] +
							"/" : ''
						if (this.curgoods.diliao2 != undefined && this.curgoods.diliao2.length > 0)
							this.buygoods.bcontent += this.curgoods.diliao2.length > 0 ? this.curgoods.diliao2[this
								.diliaoActive2] +
							"/" : ''
						//温度
						this.buygoods.bcontent += this.curgoods.wendu.length > 0 ? this.curgoods.wendu[this.wenduActive] +
							"/" : ''
						//糖度
						this.buygoods.bcontent += this.curgoods.tangdu.length > 0 ? this.curgoods.tangdu[this.tangduActive] +
							"/" : ''
						// 去掉最后个"/"
						this.buygoods.bcontent = (this.buygoods.bcontent.substring(this.buygoods.bcontent.length - 1) == '/') ?
							this.buygoods.bcontent.substring(0, this.buygoods.bcontent.length - 1) : this.buygoods.bcontent
						//价格
						this.buygoods.buyPrice = this.buyPrice
						//购买数量
						this.buygoods.buyNums = ++this.buyNums
					},
					addcartlist() {
						//选判断是否购物车内有相同的商品
						let flag = false
						this.cartlist.goods.forEach(item => {
							//先判断是否有相同的gid
							if (item.gid == this.buygoods.gid) {
								//再对比bcontent
								if (this.buygoods.bcontent == item.bcontent) {
									//购买数量加1
									item.buyNums++
									//把原来购物车内的数量赋值给this.buyNums
									this.buyNums = item.buyNums
									//设置标志位
									flag = true
								}
							}
						})
						//没有相同的，直接添加购物车
						if (flag == false)
							this.cartlist.goods.push(this.buygoods)
					},
					computerPrice() {
						let buyTotalNums=0
						let allPrice=0	
						this.cartlist.goods.forEach(item => {
							buyTotalNums += item.buyNums
							allPrice += item.buyNums * item.buyPrice
						})
						this.cartlist.buyTotalNums = buyTotalNums
						this.cartlist.allPrice = allPrice
					},
					emitComputerPrice() {
						this.computerPrice()
						uni.$emit('addcarts', this.cartlist)
					},
					onbsizeActive(index) {
						this.bsizeActive = index
						// 购买的价格
						if (this.curgoods.bsize.length > 0) {
							this.buyPrice = this.curgoods.bsize[this.bsizeActive].bprice
						} else
							this.buyPrice = this.curgoods.price
						this.resetBuyStatus() //重置购买量
					},
					ondiliaoActive(index) {
						this.diliaoActive = index
						this.resetBuyStatus() //重置购买量
					},
					ondiliaoActive2(index) {
						this.diliaoActive2 = index
						this.resetBuyStatus() //重置购买量
					},
					onwenduActive(index) {
						this.wenduActive = index
						this.resetBuyStatus() //重置购买量
					},
					ontangduActive(index) {
						this.tangduActive = index
						this.resetBuyStatus() //重置购买量
					},
					onjiaolaoActive(litem) {
						var _sum = 0
						this.curgoods.jialiao.forEach(em => {
							_sum += em.lnum
							if (_sum == 2)
								return
						})
						if (_sum >= 2) {
							uni.showToast({
								title: '加料最多选择2份',
								icon: "none"
							})
							return
						}
						this.curgoods.jialiao.forEach((item) => {
							if (item.lid == litem.lid) {
								item.lnum += 1
								return
							}
						})
						// 购买的价格
						if (this.curgoods.bsize.length > 0) {
							this.buyPrice = this.curgoods.bsize[this.bsizeActive].bprice
						} else
							this.buyPrice = this.curgoods.price
							
						this.curgoods.jialiao.forEach((item) => {
							if (item.lnum > 0)
								this.buyPrice += item.lnum * item.lprice
						})
						
						this.resetBuyStatus() //重置购买量
					},
					onjiaolaoSub(litem) {
						this.curgoods.jialiao.forEach((item) => {
							if (item.lid == litem.lid) {
								if (item.lnum > 0) {
									item.lnum -= 1
								}
								return
							}
						})
						// 购买的价格
						if (this.curgoods.bsize.length > 0) {
							this.buyPrice = this.curgoods.bsize[this.bsizeActive].bprice
						} else
							this.buyPrice = this.curgoods.price
							
						this.curgoods.jialiao.forEach((item) => {
							if (item.lnum > 0)
								this.buyPrice += item.lnum * item.lprice
						})
						this.resetBuyStatus() //重置购买量
					}
				}
			}
		</script>
<style lang="scss">
	.popup-goodsview {
		width: 700rpx;
		height: 240rpx;
		display: flex;
		position: relative;

		.popup-bimg image {
			width: 230rpx;
			height: 220rpx;
		}

		.popup-goodsname {
			height: 35px;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 35px;
		}

		.popup-goodscontent {
			width: 100%;
			font-size: 24rpx;
			color: #888888;
		}
	}

	.c-select {
		width: 100%;

		.c-select-titel {
			color: #777777;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.c-select-type {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.c-select-type-item {
				width: 28%;
				height: 60rpx;
				border: 1px solid #CCCCCC;
				box-sizing: border-box;
				background-color: #FFFFFF;
				color: #777777;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin: 5rpx 25rpx 15rpx 0;
				align-items: flex-start;
				position: relative;
				white-space: nowrap;
			}

			.c-select-jiaolao-item {
				min-width: 46%;
				height: 60rpx;
				border: 1px solid #CCCCCC;
				box-sizing: border-box;
				background-color: #FFFFFF;
				color: #777777;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin: 15rpx 20rpx 15rpx 0;
				display: flex;
				justify-content: space-between;
				padding: 0 8rpx;
				line-height: 58rpx;
				position: relative;
				white-space: nowrap;

				.badge {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: -15rpx;
					right: -10rpx;
					background-color: orange;
					color: #FFFFFF;
					font-size: 18rpx;
					line-height: 30rpx;
					z-index: 100;
					border-radius: 0 15rpx 15rpx 15rpx;
				}
			}

			.active {
				border: 1px solid #FFBFC6;
				background-color: #FFF7F8;
				color: #E60012;
				font-weight: bold;
			}
		}

	}

	.cart {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 45rpx;
		font-weight: bold;
		color: #333333;

		.add-cart {
			width: 260rpx;
			height: 95rpx;
			background-color: #E60012;
			color: #FFFFFF;
			font-size: 32rpx;
			border-radius: 10rpx;
			line-height: 95rpx;
			text-align: center;
			cursor: pointer;
		}

		.danwei {
			font-size: 24rpx;
		}

		.price {
			font-size: 38rpx;
			padding-right: 5rpx;
		}

		.buynums {
			width: 200rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-evenly;
			font-size: 32rpx;
			line-height: 48rpx;
			font-weight: normal;
		}
	}
</style>